<template>
  <div style="height: 90%">
    <ta-layout-header :style="{ background: '#fff', padding: 0 }">
      <ta-breadcrumb style="margin: 1rem 0">
        <ta-breadcrumb-item>
          <span class="title">员工列表</span> 
        </ta-breadcrumb-item>
      </ta-breadcrumb>
    </ta-layout-header>
    <ta-layout-content :style="{ margin: '1.5rem 1rem 0', height: '85%' }">
      <ta-row :style="{ background: '#fff', padding: '24px', height: '100%' }">
        <ta-col :span="5">
          <ta-cascader
            :options.sync="departmentList"
            @change="branchChange"
            placeholder="按部门筛选"
            :allowClear="true"
            notFoundContent="暂无筛选选项"
            size="large"
            style="width: 100%"
          />
        </ta-col>
        <ta-col :span="4" style="margin-left: 2rem" >
          <ta-select 
            style="width: 100%;" 
            @change="handleChange" 
            size="large"
            placeholder="按员工等级筛选"
            :options="gradeList"
            :allowClear="true"
          ></ta-select>
        </ta-col>
        <ta-col :span="5" style="margin-left: 2rem">
          <ta-range-picker 
            @change="dateChange" 
            :allowClear="true"
            :placeholder="['入职时间', '结束时间']"
            size="large"
            style="width: 100%;"
          />
        </ta-col>
        <ta-col :span="5" style="margin-left: 2rem">
          <ta-input-search
            placeholder="员工姓名搜索"
            @search="nameSearch"
            enterButton
            style="width: 100%;"
            size="large"
          />
        </ta-col>
        <ta-col :span="3" style="margin-left: 2rem">
          <router-link :to="{path: '/createPerson'}">
            <ta-button angle="5px" type="primary" size="large">添加新员工</ta-button>
          </router-link>
        </ta-col>
        <ta-col style="margin-top: 4rem">
          <ta-table 
            :columns="columns" 
            :dataSource="tableData" 
            :scroll="{ x: 2300 }" 
            :loading="tableLoading"
            :rowSelection="rowSelection"
          >
            <ta-table-edit slot="name" slot-scope="text, record" type="input" :row-editable="true"></ta-table-edit>
            <ta-table-edit slot="sex" slot-scope="text, record" type="select" :option="sexSelect" :row-editable="true"></ta-table-edit>
            <ta-table-edit slot="age" slot-scope="text, record" type="inputNumber" :row-editable="true"></ta-table-edit>
            <ta-table-edit slot="employeeId" slot-scope="text, record" type="inputNumber" :row-editable="true"></ta-table-edit>
            <ta-table-edit slot="nativePlace" slot-scope="text, record" type="cascader" :option="nativePlace" :row-editable="true"></ta-table-edit>
            <ta-table-edit slot="residence" slot-scope="text, record" type="cascader" :option="addressList" :row-editable="true"></ta-table-edit>
            <ta-table-edit slot="idCard" slot-scope="text, record" type="inputNumber" :row-editable="true"></ta-table-edit>
            <ta-table-edit slot="bankCard" slot-scope="text, record" type="inputNumber" :row-editable="true"></ta-table-edit>
            <ta-table-edit slot="phoneNum" slot-scope="text, record" type="inputNumber" :row-editable="true"></ta-table-edit>
            <ta-table-edit slot="entryDate" slot-scope="text, record" type="date" :row-editable="true"></ta-table-edit>
            <ta-table-edit slot="branch" slot-scope="text, record" type="cascader" :option="branchList" :row-editable="true"></ta-table-edit>
            <ta-table-edit slot="grade" slot-scope="text, record" type="select" :option="gradeList" :row-editable="true"></ta-table-edit>
            <ta-table-edit slot="status" slot-scope="text, record" type="select" :option="statusSelect" :row-editable="true"></ta-table-edit>
            <ta-table-edit slot="action" slot-scope="text, record" :dataSource="tableData" type="rowEdit" @change="changeData" @tableChange="fnTableChange" @rowDelete="fnRowDelete"></ta-table-edit>
          </ta-table>
        </ta-col>
        <ta-col :span="12" style="margin-top:2rem">
          <ta-button 
            angle="5px" 
            type="primary" 
            size="large"
            :loading="btnInLoading"
            style="margin: 0 2rem"
          >导入员工</ta-button>
          <ta-button 
            angle="5px" 
            type="primary" 
            size="large"
            :loading="btnOutLoading"
          >导出员工</ta-button>
        </ta-col>
        <ta-col :span="10" style="margin-top: 2rem">
           <ta-pagination
            style="float: right;"
            :dataSource.sync="tableData"
            :defaultPageSize="10"
            :pageSizeOptions="['5','10','20']"
            :params="userPageParams"
            size="large"
          />
        </ta-col>
      </ta-row>
    </ta-layout-content>
  </div>
</template>

<script>
  const columns = [
    { title: '姓名', dataIndex: 'name', width: 110, slots: { title: 'nameTitle' }, scopedSlots: { customRender: 'name' }, fixed: 'left' },
    { title: '性别', dataIndex: 'sex', width: 50, scopedSlots: { customRender: 'sex' } },
    { title: '年龄', dataIndex: 'age', width: 80, scopedSlots: { customRender: 'age' } },
    { title: '员工编号', dataIndex: 'employeeId', width: 140, scopedSlots: { customRender: 'employeeId' } },
    { title: '籍贯', dataIndex: 'nativePlace', width: 160, scopedSlots: { customRender: 'nativePlace' } },
    { title: '现居地址', dataIndex: 'residence', width: 200, scopedSlots: { customRender: 'residence' } },
    { title: '身份证号', dataIndex: 'idCard', width: 185, scopedSlots: { customRender: 'idCard' } },
    { title: '银行卡号', dataIndex: 'bankCard', width: 180, scopedSlots: { customRender: 'bankCard' } },
    { title: '手机号码', dataIndex: 'phoneNum', width: 140, scopedSlots: { customRender: 'phoneNum' } },
    { title: '入职时间', dataIndex: 'entryDate', width: 130, scopedSlots: { customRender: 'entryDate' } },
    { title: '所属部门', dataIndex: 'branch', width: 240, scopedSlots: { customRender: 'branch' } },
    { title: '员工等级', dataIndex: 'grade', width: 140, scopedSlots: { customRender: 'grade' } },
    { title: '岗位状态', dataIndex: 'status', width: 100, scopedSlots: { customRender: 'status' } },
    { title: '操作', dataIndex: 'action', width: 150, scopedSlots: { customRender: 'action' }, fixed: 'right'}
  ]
  const sexSelect = [
    {
      value: '0',
      label: '女'
    },
    {
      value: '1',
      label: '男'
    }
  ]
  const branchList = [
    {
      value: 'yb',
      label: '医保行业部',
      children: [
        {
          value: 'kf',
          label: '控费产品部',
          children: [
            {
              value: 'kaifa',
              label: '开发组'
            }
          ]
        }
      ]
    }
  ]
  const addressList = [{
    value: 'sc',
    label: '四川',
    children: [{
      value: 'cd',
      label: '成都',
      children: [{
        value: 'jj',
        label: '锦江'
      },{
        value: 'gx',
        label: '高新'
      },{
        value: 'jn',
        label: '金牛'
      }]
    }]
  }]
  const nativePlace = [{
    value: 'sc',
    label: '四川',
    children: [{
      value: 'cd',
      label: '成都'
    },{
      value: 'ms',
      label: '眉山'
    },{
      value: 'zy',
      label: '资阳'
    }]
  }]
  const statusSelect = [
    {
      value: '0',
      label: '离职'
    },
    {
      value: '1',
      label: '在职'
    }
  ]

  export default {
    name: "contentInfo",
    data () {
      return {
        departmentList: [
          {
            value: 'fn',
            label: '职能部门',
            isChooseSelf:false,
            children: [
              {
                value: 'hr',
                label: '人力资源部门'
              },
              {
                value: 'pd',
                label: '采购部门'
              },
              {
                value: 'xz',
                label: '行政部门'
              }
            ]
          },
          {
            value: 'yb',
            label: '医保行业部',
            isChooseSelf:false,
            children: [
              {
                value: 'fz',
                label: '行业发展部门',
                children: [
                  {
                    value: 'cp',
                    label: '产品组'
                  },
                  {
                    value: 'sj',
                    label: '设计部'
                  }
                ]
              },
              {
                value: 'zt',
                label: '总体设计部',
                children: [
                  {
                    value: 'kf',
                    label: '开发组'
                  },
                  {
                    value: 'seji',
                    label: '设计组'
                  },
                  {
                    value: 'cs',
                    label: '测试组'
                  }
                ]
              }
            ]
          }
        ],
        gradeList: [
          {
            value: 'F',
            label: '实习员工',
            name: 'sx'
          },
          {
            value: 'E',
            label: '初级员工',
            name: 'cj'
          },
          {
            value: 'D',
            label: '中级员工',
            name: 'zj'
          },
          {
            value: 'C',
            label: '高级员工',
            name: 'gj'
          },
          {
            value: 'B',
            label: '项目经理',
            name: 'jl'
          },
          {
            value: 'A',
            label: '公司顶层领导',
            name: 'ld'
          }
        ],
        columns,
        sexSelect,
        branchList,
        addressList,
        nativePlace,
        statusSelect,
        tableLoading: false,
        btnInLoading: false,
        btnOutLoading: false,
        tableData: [
          {
            key: '1',
            name: '张三',
            sex: '1',
            age: 26,
            employeeId: '2019090201',
            nativePlace: ['sc', 'cd'],
            residence: ['sc', 'cd', 'jj'],
            idCard: '511023199211267894',
            bankCard: '62304877706668533',
            phoneNum: '13988664789',
            entryDate: '2019-09-02',
            branch: ['yb', 'kf', 'kaifa'],
            grade: 'E',
            status: '1'
          },
          {
            key: '2',
            name: '李四',
            sex: '1',
            age: 22,
            employeeId: '2019090202',
            nativePlace: ['sc', 'zy'],
            residence: ['sc', 'cd', 'gx'],
            idCard: '511023199211267894',
            bankCard: '62304877706668533',
            phoneNum: '13988664789',
            entryDate: '2019-09-02',
            branch: ['yb', 'kf', 'kaifa'],
            grade: 'F',
            status: '1'
          },
          {
            key: '3',
            name: '王五',
            sex: '1',
            age: 23,
            employeeId: '2019090203',
            nativePlace: ['sc','ms'],
            residence: ['sc', 'cd', 'jn'],
            idCard: '511023199211267894',
            bankCard: '62304877706668533',
            phoneNum: '13988664789',
            entryDate: '2019-09-02',
            branch: ['yb', 'kf', 'kaifa'],
            grade: 'E',
            status: '1'
          },
          {
            key: '4',
            name: '赵六',
            sex: '1',
            age: 25,
            employeeId: '2019090205',
            nativePlace: ['sc','zy'],
            residence: ['sc', 'cd', 'jj'],
            idCard: '511023199211267894',
            bankCard: '62304877706668533',
            phoneNum: '13988664789',
            entryDate: '2019-09-02',
            branch: ['yb', 'kf', 'kaifa'],
            grade: 'D',
            status: '0'
          },
          {
            key: '5',
            name: '丁七',
            sex: '0',
            age: 27,
            employeeId: '2019090201',
            nativePlace: ['sc','cd'],
            residence: ['sc', 'cd', 'jj'],
            idCard: '511023199211267894',
            bankCard: '62304877706668533',
            phoneNum: '13988664789',
            entryDate: '2019-09-02',
            branch: ['yb', 'kf', 'kaifa'],
            grade: 'C',
            status: '1'
          },
          {
            key: '6',
            name: '甲八',
            sex: '1',
            age: 40,
            employeeId: '2019090201',
            nativePlace: ['sc','cd'],
            residence: ['sc', 'cd', 'jj'],
            idCard: '511023199211267894',
            bankCard: '62304877706668533',
            phoneNum: '13988664789',
            entryDate: '2019-09-02',
            branch: ['yb', 'kf', 'kaifa'],
            grade: 'A',
            status: '1'
          }
        ],
        rowSelection: {
          selectedRowKeys: [],
          onChange: this.onSelectChange
        }
      }
    },
    created () {
    },
    mounted () {

    },
    methods: {
      branchChange (value,selectedOptions) {
        console.log(selectedOptions)
      },
      handleChange (value, option) {
        console.log(value)
      },
      dateChange (date, dateString) {
        console.log(date, dateString)
      },
      nameSearch (value) {
        console.log(value)
      },
      onSelectChange (selectedRowKeys, selectedRows) {
        this.rowSelection.selectedRowKeys = selectedRowKeys
        console.log(selectedRowKeys,selectedRows)
      },
      changeData ({newData, record}) {
        // 将行数据修改为新值（newData：返回改变的值、record：该行的行数据）
        Object.assign(record, newData)
      },
      fnTableChange (dataSource) {
        // 将返回有editable属性的表格数据，赋给表格
        this.tableData = dataSource
      },
      fnRowDelete (deleteId) {
        // 返回主键id，即rowKey的值
        this.tableData = this.tableData.filter((item) => item.key != deleteId)
      },
      userPageParams () {
        return {}
      }
    }

  }
</script>

<style scoped>
  .title {
    font-size: 1.125rem;
    display: inline-block;
    margin: 1rem 2rem;
  }
</style>